<template>
  <div id="homeMap"
       style="width:100%;height:568px;"></div>
</template>
<script>
import dataJson from "@/assets/data";
import * as echarts from "echarts"
export default {
  name: "homeMap",
  props: {
    mapData: {
      type: Array,
      default: {}
    }
  },
  data() {
    return {
      mapDataFil: [],
      IEQOnLine: []
    };
  },
  watch: {},
  watch: {
    mapData(val) {
      this.mapDataFil = val.map(e => {
        var name = "北京";
        if (e.province.name == "内蒙古自治区") {
          name = "内蒙古";
        } else if (e.province.name == "黑龙江省") {
          name = "黑龙江";
        } else if (e.province.name == "广西壮族自治区") {
          name = "广西";
        } else if (e.province.name == "西藏自治区") {
          name = "西藏";
        } else if (e.province.name == "宁夏回族自治区") {
          name = "宁夏";
        } else if (e.province.name == "新疆维吾尔自治区") {
          name = "新疆";
        } else {
          name = e.province.name.substr(0, 2);
        }
        var IEQOnLine = 0;
        var IEQOffLine = 0;
        var PMSOnLine = 0;
        var PMSOffLine = 0;
        var OPTOnLine = 0;
        var OPTOffLine = 0;
        if (e.deviceStatistic && e.deviceStatistic.IEQ) {
          IEQOnLine = e.deviceStatistic.IEQ.onlineCount;
          IEQOffLine = e.deviceStatistic.IEQ.offlineCount;
        }
        if (e.deviceStatistic && e.deviceStatistic.PMS) {
          PMSOnLine = e.deviceStatistic.PMS.onlineCount;
          PMSOffLine = e.deviceStatistic.PMS.offlineCount;
        }
        if (e.deviceStatistic && e.deviceStatistic.OPT) {
          OPTOnLine = e.deviceStatistic.OPT.onlineCount;
          OPTOffLine = e.deviceStatistic.OPT.offlineCount;
        }
        // var value = {
        //   name,
        //   projectCount: e.projectCount, //项目个数
        //   ieq: {
        //     name: "IEQ",
        //     onlineCount: IEQOnLine,
        //     offlineCount: IEQOffLine
        //   },
        //   pms: {
        //     name: "PMS",
        //     onlineCount: PMSOnLine,
        //     offlineCount: PMSOffLine
        //   },
        //   opt: {
        //     name: "OPT",
        //     onlineCount: OPTOnLine,
        //     offlineCount: OPTOffLine
        //   }
        // };

        return {
          name,
          selected: true,
          value: e.projectCount, //项目个数
          ieq: {
            name: "IEQ",
            onlineCount: IEQOnLine,
            offlineCount: IEQOffLine
          },
          pms: {
            name: "PMS",
            onlineCount: PMSOnLine,
            offlineCount: PMSOffLine
          },
          opt: {
            name: "OPT",
            onlineCount: OPTOnLine,
            offlineCount: OPTOffLine
          },
          tooltip: {
            type: "item",
            show: true,
            formatter: function (value) {
              return `${value.data.name}<br/>项目数量：${value.data.value}<br/>
              ${value.data.ieq.name}：在线${value.data.ieq.onlineCount}，离线${value.data.ieq.offlineCount}<br/>
              ${value.data.pms.name}：在线${value.data.pms.onlineCount}，离线${value.data.pms.offlineCount}<br/>
              ${value.data.opt.name}：在线${value.data.opt.onlineCount}，离线${value.data.opt.offlineCount}
              `;
            }
          }
        };
      });
      // this.IEQOnLine = val.map(e => {
      //   var name = "北京";
      //   if (e.province.name == "内蒙古自治区") {
      //     name = "内蒙古";
      //   } else if (e.province.name == "黑龙江省") {
      //     name = "黑龙江";
      //   } else if (e.province.name == "广西壮族自治区") {
      //     name = "广西";
      //   } else if (e.province.name == "西藏自治区") {
      //     name = "西藏";
      //   } else if (e.province.name == "宁夏回族自治区") {
      //     name = "宁夏";
      //   } else if (e.province.name == "新疆维吾尔自治区") {
      //     name = "新疆";
      //   } else {
      //     name = e.province.name.substr(0, 2);
      //   }
      //   return {
      //     name,
      //     value: e.deviceStatistic.IEQ.onlineCount,
      //     onLine: 2
      //   };
      // });
      this.drawLine();
    }
  },
  mounted() {
    echarts.registerMap("china", dataJson);
    this.drawLine();
  },
  methods: {
    drawLine() {

      let option = {
        tooltip: {
          show: true
        },
        geo: {
          show: true,
          map: "china",
          // roam: true, // 是否开启鼠标缩放和平移漫游
          center: [105, 36], // 调整地图位置
          //滚轮缩放的极限控制
          scaleLimit: {
            min: 1,
            max: 20
          },
          zoom: 1.5, //地图放大比例
          showLegendSymbol: false, // 存在legend时显示
          //图形上的文本标签
          label: {
            normal: {
              show: false,
              textStyle: {
                color: "#000", //地图中省份字体颜色
                fontSize: 13
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                color: "#000",
                fontSize: 13
              }
            }
          },
          itemStyle: {
            // 普通样式。
            normal: {
              areaColor: "#00B7F1", //地图区域背景色
              borderColor: "#FFF", ////图形的描边颜色
              borderWidth: 0.5
            },
            // 高亮样式。
            emphasis: {
              areaColor: "yellow", //鼠标悬浮区域背景色
              textStyle: {
                color: "#000",
                fontSize: 13
              },
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 1,
              borderWidth: 0
            }
          }
        },
        //设置各省份根据值(value)显示不同颜色
        visualMap: {
          show: false, //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
          type: "continuous", //定义为连续型   piecewise定义为分段型
          //最大最小值
          min: 0,
          max: 100,
          itemWidth: 10,
          itemHeight: 120,
          //拖拽时，是否实时更新。
          realtime: false,
          //是否显示拖拽用的手柄
          calculable: false,
          //定义在选中范围中 的视觉元素
          inRange: {
            color: ["yellow", "red"]
          }
        },
        series: [
          {
            type: "map",
            geoIndex: 0,
            data: this.mapDataFil
          }
        ]
      };
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("homeMap"));
      // 绘制图表
      myChart.setOption(option);
    }
  }
};
</script>
<style>
.el-carousel__indicators--horizontal {
  display: none;
}
</style>
<style lang="scss" scoped>
.banner-img {
  width: 100%;
}
</style>
